<template>
  <div class="home-page">
    <div class="type-area">
      <div class="left">
        <p>Hello,I'm Zhao Hehui</p>
        <p>Web</p>
        <p>Engineer</p>
        <p>赵贺辉 & 前端工程师</p>
        <div class="shadow"></div>
        <a
          target="_blank"
          class="download-resume-btn"
          href="https://pan.baidu.com/s/1ZFtFW_OPa_ckhPteAk064A?pwd=0000"
        >下载简历</a>
        <div class="web-url">
          <div class="title">本站地址：</div>
          <span
            @mousemove="mousemoveWebUrl"
            @mouseout="mouseoutWebUrl"
            class="text"
            v-clipboard:copy="'https://zhao-hehui.gitee.io/zhaohehui'"
            v-clipboard:success="copySuccess"
            v-clipboard:error="copyLose"
          >https://zhao-hehui.gitee.io/zhaohehui</span>
          <img v-show="titleShow" src="../../assets/dianjifuzhi.png" alt />
        </div>
        <div class="web-url">
          <div class="title">开源地址：</div>
          <a
            class="text"
            href="https://gitee.com/zhao-hehui/zhaohehui"
            target="_blank"
          >https://gitee.com/zhao-hehui/zhaohehui</a>
        </div>
        <div class="web-url">
          <div class="title">温馨提示：建议使用键盘上下键浏览网页 ^_^</div>
        </div>
      </div>
      <div class="right">
        <img class="img" src="../../assets/01.png" alt />
        <p>My cat - Mimi</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'HomePage',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      titleShow: false
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    copyLose () {
      this.$message.error('复制网址失败，不应该呀！')
    },
    copySuccess () {
      this.$message.success('复制网址成功，快去粘贴吧！')
    },
    mousemoveWebUrl () {
      this.titleShow = true
    },
    mouseoutWebUrl () {
      this.titleShow = false
    }
  }
}
</script>

<style scoped lang="less">
.home-page {
  background-color: #fbf8cc;
  overflow: hidden;
  .type-area {
    display: flex;
    justify-content: space-between;
    margin: 120rem auto 40rem;
    width: 1240rem;
    height: 777rem;
    .left {
      padding-top: 114rem;
      line-height: 1;
      & p:nth-child(1) {
        margin-bottom: 30rem;
        font-size: 28rem;
        color: #03045e;
      }
      & p:nth-child(2) {
        margin-bottom: 30rem;
        font-size: 100rem;
        font-weight: 700;
        color: #03045e;
      }
      & p:nth-child(3) {
        margin-bottom: 30rem;
        font-size: 100rem;
        font-weight: 700;
        color: #03045e;
      }
      & p:nth-child(4) {
        margin-bottom: 30rem;
        padding-bottom: 26rem;
        font-size: 28rem;
        color: #03045e;
      }
      .download-resume-btn {
        display: block;
        position: relative;
        top: -61rem;
        width: 158rem;
        height: 61rem;
        text-align: center;
        text-decoration: none;
        line-height: 61rem;
        border-radius: 6rem;
        border: 1rem solid #474306;
        color: #474306;
        cursor: pointer;
        &:hover {
          color: #6d6fda;
          border: 1rem solid #6d6fda;
        }
      }
      .shadow {
        position: relative;
        top: 7rem;
        right: -7rem;
        width: 158rem;
        height: 61rem;
        border-radius: 6rem;
        background-color: #f5ee84;
      }
      .web-url {
        display: flex;
        position: relative;
        margin-bottom: 15rem;
        font-size: 14rem;
        color: #03045e;
        a {
          color: #03045e;
        }
        .title {
        }
        .text {
          margin-right: 10rem;
          cursor: pointer;
          &:hover {
            color: #6d6fda;
          }
        }
        img {
          position: absolute;
          top: 15rem;
          left: 70rem;
          width: 160rem;
          z-index: 999;
        }
      }
    }
    .right {
      position: relative;
      margin-top: 80rem;
      width: 514rem;
      height: 526rem;
      img {
        width: 514rem;
        height: 526rem;
      }
      p {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 24rem;
        color: #ffa101;
      }
    }
  }
}
</style>
